<template>
<!-- 投放账号 -->
<a-card :border='false'>
  <div>

    <my-table-screen
      :queryParam="queryParam"
      :queryOptions="queryOptions"
      :queryData="queryData"
      @handleFilter="handleFilter"
    ></my-table-screen>

    <div>
        <!-- :page="queryParam.page"
        :pageSize="queryParam.page_size"
        v-if="total>0"
        :total="total" -->
      <!-- <a-spin tip="正在加载..."> -->
        <my-table
          ref="mytable"
          :tableData="tableData"
          @sortChange="sortChange"
          @rowSelection="v=>rowSelection(v)"
          @tableHandleOut="tableHandleOut"
          @switchChange="switchChange"
        ></my-table>
      <!-- </a-spin> -->

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParam.page"
        :limit.sync="queryParam.page_size"
        @pagination="getList"
      />
    </div>
  </div>

</a-card>
</template>

<script>
import { getAccountList } from "@/api/adv/account";
import mixins from '../../model/mixin.js'
import { Status } from '@/api/statusInfo'

export default {
  mixins:[mixins],
  data () {
    return {
      // 查询
      queryParam:{  // 初始化数据
        page:1,
        page_size:10
      },
      total: 0,
      queryData:[
        { id:'status',title:'授权状态',type:'select',placeholder:'请选择状态',options:'status' },
        { id:'keyWord',title:'关键词搜索',type:'input',placeholder:'支持账户ID或名称搜索' },
        { id:'created_at',title:'创建时间',type:'times' },
      ],
      queryOptions:{
        status:this.$global.status
      },
      // 表格
      tableData:{
        rowSelection:true,
        batchAction:[
          { 
            title:'批量操作',
            item:'primary',
            type:'dropdown',
            children:[
              { name:'开启',tableFnc:'handleEnable' },
              { name:'关闭',tableFnc:'handleDisable' },
            ],
          },
        ],
        tableDataSource:[],
        tableColumns:[
          { title:'账户ID',dataIndex:'account_id',align:'center',width:160 },
          { title:'昵称',dataIndex:'name',align:'center',width:150, },
          { title:'公司名称',dataIndex:'company',align:'center',width:180, },
          { title:'消耗',dataIndex:'cost',align:'center',width:100,sorter:true  },
          { title:'点击数',dataIndex:'click',align:'center',width:100 },
          { title:'展示数',dataIndex:'show',align:'center',width:100 },
          { title:'转化数',dataIndex:'convert',align:'center',width:100 },
          { title:'父ID',dataIndex:'parent_id',align:'center',width:160 },
          { title:'创建时间',dataIndex:'created_at',align:'center',width:180 },
          { title:'更新时间',dataIndex:'updated_at',align:'center',width:180 },
          { title:'状态',dataIndex:'status',align:'center',fixed:'right',width:100,scopedSlots: {customRender:'switch'},
            api:process.env.VUE_APP_ADV_OCEAN_API,postType:'ocean/account',off:'DISABLE',run:'ENABLE',
          },
        ]
      },
      // 选项
      // checkData:[]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 初始化数据
    getList(){
      getAccountList(this.queryParam).then((res)=>{
        if(res.code === 'SUCCESS'){
          console.info(res.data.list,'list')
          this.tableData.tableDataSource = res.data.list
          this.total = res.data.page_info.total
        }
      })
    },
    // 表格头部按钮
    async tableHandleOut(tableFnc){
      const $class = new Status();  //创建类
      $class.setApi(process.env.VUE_APP_ADV_OCEAN_API)   //设置api
      if( this.mx_tabSelect.length === 0 ) return this.$Tip('请选择账号')
      let res
      if( tableFnc === 'handleEnable' ){  // 批量开启
        res = await $class.batchEnable(this.mx_tabSelect,'ocean/account')
      }else if( tableFnc === 'handleDisable' ){ // 批量关闭
        res = await $class.batchStop(this.mx_tabSelect,'ocean/account')
      }
      this.$Tip(res)
      if( res.code === "SUCCESS" ) this.getList()
    },
    // // 排序
    // sortChange(sorter){
    //   const { field, order } = sorter
    //   this.queryParam.order_by = field
    //   this.queryParam.order_type = order === 'ascend' ? 'asc' : 'desc'
    //   this.handleFilter()
    // },
    // handleFilter(){
    //   this.queryParam.page = 1
    //   this.getList()
    // },
  }
}
</script>
